<script lang="ts" setup>
import { ref, type PropType } from 'vue';
import { Select, createListCollection, type SelectValueChangeDetails } from '@ark-ui/vue/select';

interface Item {
  label: string
  value: string
  disabled?: boolean
}

const props = defineProps({
  options: {
    type: Array as PropType<Item[]>,
    default: () => [],
  },
});

const emit = defineEmits(['change']);
const modelValue = defineModel<string>({ default: '' });
const selectValue = ref<string[]>([modelValue.value]);

const collection = createListCollection<Item>({
  items: props.options,
});

const handleValueChange = (details: SelectValueChangeDetails<Item>) => {
  modelValue.value = details.value[0];
  emit('change', details.value[0]);
}
</script>

<template>
  <Select.Root
    class="component-search-select relative z-1 text-#292929"
    v-model="selectValue"
    :collection="collection"
    @value-change="handleValueChange"
    :positioning="{ gutter: 4 }"
  >
    <Select.Control>
      <Select.Trigger class="flex-y-center gap-x-4 bg-transparent text-12">
        <Select.ValueText class="leading-20" />
        <Select.Indicator class="transition-transform data-[state=open]:(rotate-180)">
          <span class="i-icons:arrow-down-1 block size-10"></span>
        </Select.Indicator>
      </Select.Trigger>
    </Select.Control>
    <Select.Positioner>
      <Select.Content class="min-w-150 rounded-4 bg-white py-12 shadow-[0px_1px_8px_0px_rgba(0,0,0,0.08)]">
        <Select.ItemGroup>
          <Select.Item
            class="cursor-pointer px-20 py-8 text-14 leading-20 data-[highlighted]:bg-hex-f7f7f7 data-[state=checked]:bg-hex-f7f7f7"
            v-for="item in collection.items"
            :key="item.value"
            :item="item"
          >
            <Select.ItemText>{{ item.label }}</Select.ItemText>
          </Select.Item>
        </Select.ItemGroup>
      </Select.Content>
    </Select.Positioner>
    <Select.HiddenSelect />
  </Select.Root>
</template>

<style lang="scss" scoped>
</style>
